<template>
    <el-table
            ref="multipleTableRef"
            :data="data"
            style="width: 100%"
            row-key="id"
            :border="config.border"
            :stripe="config.stripe"
            :tree-props="defaultProps"
            :row-class-name="rowClassName"
            :header-row-class-name="headerClassName"
            select-on-indeterminate
            @select-all="selectAll"
            @row-click="rowClick"
            @select="selectChange"
    >
        <el-table-column v-if="config.selection" type="selection" width="40"/>
        <el-table-column v-if="config.index" type="index" prop="编号"/>
        <template v-for="(item,index) in title" :key="index">
            <template v-if="item.columnType!='edit'">
                <el-table-column v-if="item.visible==undefined ||item.visible==true" :prop="item.prop" :label="item.label"
                                 :sortable="item.sortable"
                                 :width="flexColumnWidth(item.prop, data)"
                >
                    <!--自定义表格内容，这里是向element组件传递插槽-->
                    <template #default="scope">
                        <template v-if="item.columnType=='btn'">
                            <el-button size="small" @click="handleEdit(scope.$index, scope.row)" @click.stop="rowClick">
                                {{scope.row[item.prop]}}
                            </el-button>
                        </template>
                        <template v-else-if="item.columnType=='icon'">
                            <el-icon :size="20" @click.stop="rowClick">
                                <i :class="scope.row[item.prop]"></i>
                            </el-icon>
                        </template>
                        <template v-else-if="item.columnType=='input'">
                            <el-input v-model="scope.row[item.prop]" @click.stop="rowClick"
                                      @blur="blur(scope.row,item.prop)">
                            </el-input>
                        </template>
                        <template v-else-if="item.columnType=='switch'">
                            <el-switch v-model="scope.row[item.prop]"
                                       class="ml-2"
                                       active-color="var(--el-color-success)"
                                       inactive-color="var(--el-color-info)"
                                       @click.stop="rowClick"
                                       @change="(val)=>{changeStat(scope.row,item.prop, val)}"/>
                        </template>
                        <template v-else-if="item.columnType=='image'">
                            <el-image style="width: 100px; height: 100px"
                                      :src="scope.row[item.prop]"
                                      @click="scale(item.prop)"
                                      fit="cover" @click.stop="rowClick"></el-image>
                        </template>
                        <template v-else>
                            {{scope.row[item.prop]}}
                        </template>
                    </template>
                </el-table-column>
            </template>
            <template v-else>
                <el-table-column v-if="item.visible==true" :prop="item.prop" :label="item.label"
                                 :sortable="item.sortable"
                                 :width="item.width" fixed="right">
                    <template #default="scope" :prop="item.prop" :label="item.label">
                        <el-button-group @click.stop="rowClick">
                            <!--在slot外部包裹上span可以 绑定事件，但不灵活-->
                            <slot name="add" :item="{...scope.row}"></slot>
                            <slot name="edit" :item="{...scope.row}"></slot>
                            <slot name="detail" :item="{...scope.row}"></slot>
                            <slot name="del" :item="{...scope.row}"></slot>
                        </el-button-group>
                    </template>
                </el-table-column>
            </template>
        </template>
    </el-table>

    <!--缩放图片-->
<!--    <dialog-img v-model="dialogVisible" :data="data" :srcField="srcField"></dialog-img>-->

    <!--操作模块-->
<!--    <Dialog v-model:visible="visible"></Dialog>-->

</template>

<script lang="ts">
    import {defineComponent} from 'vue'

    export default defineComponent({
        name: "Tables",
        props: {
            title: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            data: {
                type: Array,
                default: () => {
                    return [{}];
                }
            },
            config: {
                type: Object,
                default: () => {
                    return {
                        border: true,		//边框
                        stripe: true,		//斑马纹
                        selection: true,	//是否可全选
                        index: false,		//索引
                        lazy: true,          //懒加载
                    };
                }
            }
        },
        setup() {


            return {

            }
        }
    })
</script>

<style scoped>

</style>
